<template>
    <!-- 合格供应商查看 -->
    <div class="e-form">
        <div class="tabs" v-if="Object.keys(basicFormData).length != 0">
            <el-tabs
                tab-position="left"
                v-model="tabsName"
                @tab-click="onChangeTab"
            >
                <!-- 基本信息 -->
                <el-tab-pane
                    label="基本信息"
                    name="baseInfo"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane
                    label="资质信息"
                    name="aptitude"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane
                    label="企业主要业绩"
                    name="firmPerformance"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane
                    label="企业主要管理人"
                    name="firmAdmin"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane
                    label="附件信息"
                    name="accessory"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane
                    label="审核历史"
                    name="auditHistory"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane
                    label="变更历史"
                    name="alteration"
                    :disabled="clickTabFlag"
                ></el-tab-pane>

                <el-tab-pane
                    label="评价历史"
                    name="evaluate"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <div>
                    <!-- 基本信息 -->
                    <div id="baseInfoCon" class="con">
                        <div class="e-form">
                            <div class="tabs">
                                <div class="tabs-title" id="baseInfo">
                                    基本信息
                                </div>
                                <div style="width: 100%" class="form">
                                    <el-form
                                        :model="basicFormData"
                                        label-width="150px"
                                    >
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="统一社会信用代码"
                                                >
                                                    {{
                                                        basicFormData.creditCode
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="分包商名称"
                                                >
                                                    {{
                                                        basicFormData.subcontractorName
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="类型">
                                                    {{ basicFormData.type }}
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="法人代表">
                                                    {{ basicFormData.deputy }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-form-item label="注册地址">
                                                <!-- 省地址 -->

                                                {{
                                                    basicFormData.registerAddProvince +
                                                    basicFormData.registerAddCity +
                                                    basicFormData.registerAddDistrict +
                                                    basicFormData.registerAddInfo
                                                }}
                                            </el-form-item>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="联系电话">
                                                    {{
                                                        basicFormData.contactTel
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="注册资本（万元）"
                                                >
                                                    {{
                                                        basicFormData.registerCapital
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="传真">
                                                    {{ basicFormData.fax }}
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="邮箱">
                                                    {{ basicFormData.email }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="纳税类别">
                                                    {{ basicFormData.taxType }}
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="邮编">
                                                    {{ basicFormData.postCode }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="增值税一般纳税人资格查询"
                                                    ><a
                                                        href="https://etax.sichuan.chinatax.gov.cn/"
                                                        target="_blank"
                                                        >查询</a
                                                    >
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="四川住房城乡建设厅信息查询"
                                                >
                                                    <a
                                                        href="http://202.61.88.188/xxgx/index.aspx"
                                                        target="_blank"
                                                        >查询</a
                                                    ></el-form-item
                                                >
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="信用信息查询"
                                                >
                                                    <a
                                                        href="http://www.gsxt.gov.cn/index.html"
                                                        target="_blank"
                                                        >查询</a
                                                    >
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="管理单位">
                                                    {{
                                                        basicFormData.manageOrgName
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="是否为境外单位"
                                                >
                                                    <span
                                                        v-if="
                                                            basicFormData.isAbroadUnit ==
                                                            1
                                                        "
                                                    >
                                                        {{ '是' }}
                                                    </span>
                                                    <span
                                                        v-if="
                                                            basicFormData.isAbroadUnit ==
                                                            0
                                                        "
                                                    >
                                                        {{ '否' }}
                                                    </span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="录入人">
                                                    {{
                                                        basicFormData.enteringPerson
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="信用等级">
                                                    <span>{{
                                                        basicFormData.creditLevelName
                                                    }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="状态">
                                                    <span
                                                        v-if="
                                                            basicFormData.state ==
                                                            0
                                                        "
                                                        >{{ '草稿' }}</span
                                                    >
                                                    <span
                                                        v-else-if="
                                                            basicFormData.state ==
                                                            1
                                                        "
                                                        >{{ '审核中' }}</span
                                                    >
                                                    <span
                                                        v-else-if="
                                                            basicFormData.state ==
                                                            2
                                                        "
                                                        >{{ '已审核' }}</span
                                                    >
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-form>
                                </div>
                            </div>
                            <div class="buttons">
                                <el-button
                                    type="primary"
                                    style="background: #2e61d7"
                                    @click="submit()"
                                    >提交</el-button
                                >
                                <el-button
                                    type="primary"
                                    style="background: #2e61d7"
                                    @click="save()"
                                    >保存</el-button
                                >
                                <el-button @click="cancel()">取消</el-button>
                            </div>
                        </div>

                        <!-- ------------------------------------------------------------------------------------- -->
                    </div>

                    <!-- 资质信息 -->
                    <div id="aptitudeCon" class="con">
                        <div class="tabs-title" id="aptitude">资质信息</div>
                        <div class="e-table">
                            <div class="top">
                                <div class="left">
                                    <div>
                                        <el-button
                                            size="small"
                                            style="
                                                background: #7aa818;
                                                color: #fff;
                                            "
                                            >下载</el-button
                                        >
                                    </div>
                                </div>
                            </div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                ref="table"
                                class="table"
                                :max-height="$store.state.tableHeight"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                                :header-cell-style="{ textAlign: 'center' }"
                                :cell-style="{ textAlign: 'center' }"
                                v-sortTable="{
                                    tableData: tableData,
                                    _this: this,
                                    ref: 'table'
                                }"
                            >
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column
                                    prop="a1"
                                    label="序号"
                                    width="60"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="a"
                                    label="证书编号"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="b"
                                    label="证书类型"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="主营范围/证书等级"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="有效期开始日期"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="有效期结束日期"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="文件名"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="大小"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="上传时间"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="上传人"
                                    width="100"
                                >
                                </el-table-column>
                            </el-table>
                            <div class="upload">
                                <el-upload
                                    class="upload-demo"
                                    drag
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    multiple
                                >
                                    <el-button
                                        type="primary"
                                        style="padding: 20px 80px"
                                        >上传附件</el-button
                                    >
                                    <div
                                        style="
                                            margin-top: 10px;
                                            font-size: 12px;
                                        "
                                    >
                                        鼠标拖入上传，按住Ctrl可多选附件
                                    </div>
                                </el-upload>
                            </div>
                        </div>
                    </div>

                    <!-- 企业主要业绩 -->
                    <div id="firmPerformanceCon" class="con">
                        <div class="tabs-title" id="firmPerformance">
                            企业主要业绩
                        </div>
                        <div class="e-table">
                            <div class="top">
                                <div class="left">
                                    <div>
                                        <el-button
                                            size="small"
                                            style="
                                                background: #7aa818;
                                                color: #fff;
                                            "
                                            >下载</el-button
                                        >
                                    </div>
                                </div>
                            </div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                ref="table"
                                class="table"
                                :max-height="$store.state.tableHeight"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                                :header-cell-style="{ textAlign: 'center' }"
                                :cell-style="{ textAlign: 'center' }"
                                v-sortTable="{
                                    tableData: tableData,
                                    _this: this,
                                    ref: 'table'
                                }"
                            >
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column
                                    prop="a1"
                                    label="序号"
                                    width="60"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="a"
                                    label="合同名称"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="b"
                                    label="项目名称"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="合同金额"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="所承担工程内容"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="开工时间"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="竣工时间"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="项目负责人"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="业绩证明人"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="证明人电话"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="质量安全信誉评价意见"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="附件"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="合同类型"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="合同状态"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="业绩来源"
                                    width="150"
                                >
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <!-- 企业主要管理人 -->
                    <div id="firmAdminCon" class="con">
                        <div class="tabs-title" id="firmAdmin">
                            企业主要管理人
                        </div>
                        <div class="e-table">
                            <div class="top">
                                <div class="left">
                                    <div>
                                        <el-button
                                            size="small"
                                            style="
                                                background: #7aa818;
                                                color: #fff;
                                            "
                                            >下载</el-button
                                        >
                                    </div>
                                </div>
                            </div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                ref="table"
                                class="table"
                                :max-height="$store.state.tableHeight"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                                :header-cell-style="{ textAlign: 'center' }"
                                :cell-style="{ textAlign: 'center' }"
                                v-sortTable="{
                                    tableData: tableData,
                                    _this: this,
                                    ref: 'table'
                                }"
                            >
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column
                                    prop="a1"
                                    label="序号"
                                    width="60"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="a"
                                    label="人员类别"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="b"
                                    label="姓名"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="身份证号码"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="联系电话"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="e"
                                    label="邮箱"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="f"
                                    label="证书及编号"
                                    width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="g"
                                    label="资格证书有效开始日期"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="h"
                                    label="资格证书有效结束日期"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="r"
                                    label="身份证附件"
                                    width="100"
                                >
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <!-- 附件信息 -->
                    <div id="accessoryCon" class="con">
                        <div class="tabs-title" id="accessory">附件信息</div>
                        <div class="e-table">
                            <div class="top">
                                <div class="left">
                                    <el-button size="mini">添加</el-button>
                                    <!-- <el-button size="mini">删除</el-button> -->
                                </div>
                            </div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                ref="table"
                                class="table"
                                :max-height="$store.state.tableHeight"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                                :header-cell-style="{ textAlign: 'center' }"
                                :cell-style="{ textAlign: 'center' }"
                                v-sortTable="{
                                    tableData: tableData,
                                    _this: this,
                                    ref: 'table'
                                }"
                            >
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column
                                    prop="a1"
                                    label="序号"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="a2"
                                    label="类型"
                                    width="150"
                                >
                                </el-table-column>

                                <el-table-column
                                    prop="a"
                                    label="文件名称"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="b"
                                    label="文件大小"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="上传时间"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="d"
                                    label="上传人"
                                    width="100"
                                >
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <!-- 审核历史 -->
                    <div id="auditHistoryCon" class="con">
                        <div class="tabs-title" id="auditHistory">审核历史</div>
                        <div class="e-table">
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                ref="table"
                                class="table"
                                :max-height="$store.state.tableHeight"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                                :header-cell-style="{ textAlign: 'center' }"
                                :cell-style="{ textAlign: 'center' }"
                                v-sortTable="{
                                    tableData: tableData,
                                    _this: this,
                                    ref: 'table'
                                }"
                            >
                                <el-table-column
                                    prop="a1"
                                    label="审核级次"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="a"
                                    label="审核人"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="b"
                                    label="审核人岗位"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="通知时间"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="审核时间"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="审核意见"
                                    width="200"
                                >
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <!-- 变更历史 -->
                    <div id="alterationCon" class="con">
                        <div class="tabs-title" id="alteration">变更历史</div>
                        <div class="e-table">
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                ref="table"
                                class="table"
                                :max-height="$store.state.tableHeight"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                                :header-cell-style="{ textAlign: 'center' }"
                                :cell-style="{ textAlign: 'center' }"
                                v-sortTable="{
                                    tableData: tableData,
                                    _this: this,
                                    ref: 'table'
                                }"
                            >
                                <el-table-column
                                    prop="a1"
                                    label="工程分包商名称"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="a"
                                    label="注册资本（万元）"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="b"
                                    label="统一社会信用代码"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="管理单位"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="主营范围"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="资质等级"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="变更时间"
                                    width="200"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="c"
                                    label="变更人"
                                    width="200"
                                >
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <!-- 评价历史 -->
                    <div id="evaluateCon" class="con">
                        <div class="tabs-title" id="evaluate">评价历史</div>
                        <el-table
                            :data="tableData"
                            border
                            style="width: 100%"
                            ref="table"
                            class="table"
                            :max-height="$store.state.tableHeight"
                            @cell-mouse-enter="cellMouseEnter"
                            @cell-mouse-leave="cellMouseLeave"
                            :cell-class-name="cellClsNm"
                            v-sortTable="{
                                tableData: tableData,
                                _this: this,
                                ref: 'table'
                            }"
                        >
                            <el-table-column
                                prop="a1"
                                label="评价机构"
                                width="200"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="a"
                                label="评价时间"
                                width="200"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="b"
                                label="评价结论"
                                width="200"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="c"
                                label="开始时间"
                                width="200"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="c"
                                label="结束时间"
                                width="200"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="c"
                                label="评价来源"
                                width="200"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-tabs>
        </div>
        <div id="seat" :style="{ height: seatHeight + 'px' }"></div>
        <div class="buttons">
            <span class="tip"
                ><span style="color: red; margin-right: 0">*</span
                >为必填项</span
            >
            <!-- <el-button type="primary" size="small" style="background: #2e61d7"
        >打印</el-button
      > -->
            <el-popconfirm title="请问确认删除吗？" @confirm="delData">
                <el-button
                    type="primary"
                    size="small"
                    style="background: #2e61d7"
                    slot="reference"
                    >删除</el-button
                >
            </el-popconfirm>
            <el-button type="primary" size="small" style="background: #2e61d7"
                >收藏</el-button
            >
            <el-button
                type="primary"
                size="small"
                style="background: #2e61d7"
                @click="submit"
                >保存</el-button
            >
            <el-button type="primary" size="small" style="background: #2e61d7"
                >保存并提交</el-button
            >
            <!-- <el-button type="primary" size="small" style="background: #2e61d7"
        >审核</el-button
      >
      <el-button type="primary" size="small" style="background: #2e61d7"
        >撤回</el-button
      > -->

            <el-button size="small" @click="handleClose">取消</el-button>
        </div>
    </div>
</template>

<script>
// import ComTreeTable from '@/templates/table/treeTable.vue'
// import ComTreeFile from '@/templates/table/treeFile.vue'
// import ComPagination from '@/components/pagination/pagination.vue'
// import applyRequest from '@/api/tender/apply.js'
// import { mapState } from 'vuex'
import '@/utils/jquery.scrollTo.min'

export default {
    data () {
        return {
            tabsName: 'baseInfo',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData: [],
            value: '',
            textarea: '',

            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            //基本信息表单数据
            basicFormData: {
                creditCode: '', //统一社会信用代码
                subcontractorName: '', //分包商名称
                type: '', //类型
                deputy: '', //法人代表
                registerAddProvince: '', //注册地址省
                registerAddCity: '', //注册地址市
                registerAddDistrict: '', //注册地址先去
                registerAddInfo: '', //注册地址详细
                contactTel: '', //联系电话
                registerCapital: '', //注册资本
                fax: '', //传真
                email: '', //邮箱
                taxType: '', //纳税类别
                postCode: '', //邮编
                manageOrgName: '', //管理单位
                isAbroadUnit: '', //是否为境外单位
                enteringPerson: '', //录入人  ????
                creditLevelName: '', //信用等级
                state: '' //状态
            }
        }
    },
    computed: {
        judgeRoute () {
            if (this.$route.path.includes('Add')) {
                return false
            }
            return true
        },
        // 填补底部空白，以使高度够滚动
        seatHeight () {
            return this.screenHeight - 72 - this.lastConHeight
        }
    },
    components: {
        // ComTreeTable,
        // ComTreeFile,
        // ComPagination,
    },
    created () {
        this.id = this.$route.query.id

        this.userName = localStorage.getItem('userName')

        this.getBasicData() //进入页面就获取基本信息数据
    },
    mounted () {
        // 获取最后一个内容区域的高度，计算底部空白
        this.getLastConHeight()

        // 保存所有tabName
        const arr = [
            'baseInfo',
            'aptitude',
            'firmPerformance',
            'firmAdmin',
            'accessory',
            'auditHistory',
            'alteration',
            'evaluate'
        ]
        let $idsTop = []
        window.addEventListener('scroll', () => {
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            if (this.clickTabFlag) {
                return
            }

            if (!$idsTop[$idsTop.length - 1]) {
                $idsTop = arr.map(item => {
                    const $item = document.getElementById(item)
                    let itemTop = null
                    if ($item) {
                        itemTop = $item.offsetTop
                    }
                    return itemTop
                })
            }
            const scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop
            // 倒序查找
            let curLocal = 0
            for (let len = $idsTop.length, i = len - 1; i >= 0; i--) {
                let item = $idsTop[i]
                if (scrollTop + 1 >= item) {
                    curLocal = i
                    break
                }
            }
            // 设置对应tabName
            this.tabsName = arr[curLocal]
        })

        this.screenWidth =
            document.documentElement.clientWidth - this.topHeight
        this.screenHeight =
            document.documentElement.clientHeight - this.topHeight
        window.addEventListener('resize', () => {
            this.screenWidth = document.documentElement.clientWidth
            this.screenHeight = document.documentElement.clientHeight
            $idsTop = arr.map(item => {
                const itemTop = document.getElementById(item).offsetTop
                return itemTop
            })
        })
    },
    methods: {
        //获取基本信息数据
        getBasicData () {
            this.$Ajax
                .httpGet({
                    url: '/outer/supplier/findBySupplierId',
                    params: {
                        hasDtls: false,
                        supplierId: this.id
                    },
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(res => {
                    this.basicFormData = res
                    this.basicFormData.subcontractorName = res.supplierName
                    this.basicFormData.type = res.supplierTypeKey
                    this.basicFormData.taxType = res.taxTypeName
                    this.basicFormData.enteringPerson = this.userName
                    this.basicFormData.creditLevelName = res.creditLevel
                    this.basicFormData.state = res.state
                })
        },
        // 获取最后一个内容区域的高度，计算底部空白
        getLastConHeight () {
            let si = setInterval(() => {
                // 因为dom异步加载，通过轮询找到渲染后的dom，获取高度
                if (document.getElementById('evaluateCon')) {
                    const lastConHeight =
                        document.getElementById('evaluateCon').offsetHeight
                    console.log('lastConHeight: ', lastConHeight)
                    this.lastConHeight = lastConHeight
                    console.log('this.lastConHeight', this.lastConHeight)
                    clearInterval(si)
                    si = null
                }
            }, 100)
        },
        //删除
        delData () {
            this.$Ajax
                .httpGet({
                    url: '/outer/supplier/delete',
                    params: {
                        id: this.id
                    },
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(res => {
                    this.$message({
                        showClose: true,
                        type: 'success',
                        message: res.message
                    })
                    this.$router.push('./qualifiedSupplier')
                })
        },

        submit () {},
        handleFullScreen () {
            this.fullscreen = !this.fullscreen
        },
        //取消
        handleClose () {
            this.dialogVisible = false
            this.$router.push('./qualifiedSupplier')
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        onChangeTab (e) {
            console.log('clickTabFlag: ', this.clickTabFlag)
            $.scrollTo(`#${e.name}`, 500)
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            this.clickTabFlag = true
            // 动画结束后，恢复状态
            setTimeout(() => {
                this.clickTabFlag = false
            }, 600)
        }
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    margin-bottom: 80px;
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}

.e-table {
    background: #fff;
}
// ::v-deep.el-table__body-wrapper::-webkit-scrollbar{
//      width: 6px !important; // 横向滚动条
//     height: 10px !important// 纵向滚动条
// }

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 10px; // 纵向滚动条
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 5px;
}

.el-tab-pane {
    margin-left: -10px;
}
::v-deep.el-upload-dragger {
    height: 90px;
    margin-left: 300px;
}
</style>
